<template>
  <el-container>
    <el-header class="headflex">
      <div class="kgcImg"><img src="../../assets/mykgclogo.png" alt="" /></div>
      <ul id="menu">
        <li><a>系列</a></a></li>
        <li><a>岗位</a></li>
        <li><a>实战</a></li>
        <li><a>题库</a></li>
        <li><a>社区</a></li>
        <li><a>教材</a></li>
        <li><a>阿里云</a></li>
        <li><a>校区</a></li>
        <li></li>
      </ul>
      <div class="searchInput">
        <el-input style="width: 222px" placeholder="搜索" prefix-icon="el-icon-search" size="medium"></el-input>
      </div>
      <div class="headright">
        <div class="appdownload">
          <a href="#">
            <img src="../../assets/kgcerweuna.jpg" alt="">
            APP下载
          </a>
        </div>
        <div style="margin-right:20px;cursor: pointer;">
          <el-dropdown @command="handleCommand" :show-timeout="0" placement="top-start">
          <span style="font-size: 28px;color: #D6D6D6;"> <i class="el-icon-bell" style="font-weight:600"></i> </span>
  <el-dropdown-menu>
    <el-dropdown-item command=''>消息</el-dropdown-item>
    <el-dropdown-item command=''>提醒</el-dropdown-item>
    <el-dropdown-item command=''>私信</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
        </div>
        <div class="smallheader">
          
          <el-dropdown  @command="handleCommand" :show-timeout="0" placement="top-start">
          <el-avatar :src="this.$store.state.userheaderimg"></el-avatar>
  <el-dropdown-menu>
    <el-dropdown-item command=''>我的课程</el-dropdown-item>
    <el-dropdown-item command=''>最新动态</el-dropdown-item>
    <el-dropdown-item command=''>我的试题</el-dropdown-item>
    <el-dropdown-item command=''>我的社区</el-dropdown-item>
    <el-dropdown-item command=''>新手任务</el-dropdown-item>
    <el-dropdown-item command='/home/money'>我的钱包</el-dropdown-item>
    <el-dropdown-item command='/home/setting'>设置</el-dropdown-item>
    <el-dropdown-item command='/login'>退出</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
            </div>
      </div>
    </el-header>
    <el-main>
      <router-view></router-view>
      <div class="footer">
        <!-- 中间显示内容链接部分 -->
        <div class="f-links">

        </div>
        <!-- 底部版权 -->
        <div class="row_inner copy-right-box">
          <div class="copyrighttext">
            <p>2019 北京课工场教育科技有限公司 版权所有 京ICP备15057271号 京公网安备11010802017390号</p>
            <p> <a href="#">客服邮箱 ke@kgc.cn</a></p>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    // 退出注销
    handleCommand(command){
      if(command=='/login'){
        this.logout()
        return
      }
      this.$router.push(command)
    },
    // 退出注销
    logout(){
      window.localStorage.removeItem('uid')
      window.localStorage.removeItem('token')
      this.$store.dispatch('setToken', '')
      this.$store.dispatch('setUser', 0)
      this.$router.push('/login')
    }
  },
  async created(){
    await this.$store.dispatch('getImg', this.$store.state.uid)
  }
}
</script>

<style lang="less" scoped>
.row_inner{
  width: 62%;
  height: 100%;
}

.copy-right-box {
    border-top: #dbdbdb solid 1px;
}

.f-links{
  min-height: 295px;
  width: 62%;
}

.footer{
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-top: 45px;
  height: 380px;
  background: #F0F0F0;

}


.headflex{
  display: flex;
  justify-content: center;
  align-items: center;
}

.smallheader{
  cursor: pointer;
}

.el-header {
  height: 70px !important;
  background: #ffffff;
}

.el-main {
  background-color: #f5f5f5;
  padding: 0;
}

.el-container {
  height: 100%;
}

.kgcImg{
  position: relative;
  left: -7%;
}

.kgcImg:hover{
  cursor: pointer;
}

#menu {
  font-size: 16px; /* 设置文字大小和字体样式 */
  position: relative;
  color: #484848;
  left: -5%;
}
#menu, #menu li {
  list-style: none; /* 将默认的列表符号去掉 */
  padding: 0; /* 将默认的内边距去掉 */
  margin: 0; /* 将默认的外边距去掉 */
}

#menu li { 
  float:left; /* 往左浮动 */
}

#menu li:hover{
  color: #9FC105;
}

#menu li a {
display:block; /* 将链接设为块级元素 */
width:50px; /* 设置宽度 */
height:50px; /* 设置高度 */
line-height:50px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
text-align:center; /* 居中对齐文字 */
cursor: pointer;
}

.headright{
  display: flex;
  transform: translateX(50%);
  z-index:5;
}

.appdownload {
  margin-right: 20px;
  display: flex;
  align-items: center;
  a{
    font-size: 14px;
    color: #9FC105;
    font-weight: bold;
    text-align: center;
  }
   a img{
     display: none;
     position: absolute;
     transform: translate(-20%, 30%);
   }
  
  a:hover img{
    display: block;
  }
}

.searchInput{
 
  position: relative;
  left: -4%;
}

.copyrighttext{
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p{
    font-size: 12px;
    color: #767676;
    a{
      color: #767676;
    }
  }
}

</style>
